import { View } from '@tarojs/components'
import { useState } from 'react'
import { TreasuryTask } from '@/store/treasurySlice'
import to from 'await-to-js'
import Taro from '@tarojs/taro'
import { Card, CheckboxInput, DatePicker, Form, PrimaryButton, SelectPicker, TextArea, TextInput, TimePicker } from '@/ui-components'
import { TaskOwner, TaskType } from '@/constants'
import { useAppSelector } from '@/store/hooks'
import dayjs from 'dayjs'
import { createTask } from '../../network'
import './index.scss'



interface TreasuryTaskState extends Partial<TreasuryTask> {
  endDate?: string
  endDateTime?: string
}

export default function TreasuryTaskCreate() {

  const [taskParams, setTaskParams] = useState<TreasuryTaskState>({})
  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)

  const createTeasuryTask = async () => {
    taskParams.treasuryId = treasuryId
    taskParams.deadline = dayjs(`${taskParams.endDate} ${taskParams.endDateTime}`, 'YYYY-MM-DD HH:mm').format('YYYYMMDDHHmmss')
    const [err] = await to(createTask(taskParams as TreasuryTask))
    if (err) {
      Taro.showToast({ title: '发布任务失败', icon: 'none' })
    } else {
      Taro.showToast({ title: '发布任务成功', icon: 'success' })
      Taro.navigateBack()
    }
  }

  return (
    <View className='treasury-task-create'>
      <Card>
        <Form>
          <TextInput
            label='任务标题'
            placeholder='请输入任务标题'
            value={taskParams.name}
            onChange={(name) => {setTaskParams({ ...taskParams, name })}}
          />
          <TextArea
            label='任务描述'
            placeholder='请输入任务描述'
            value={taskParams.description}
            onChange={(description) => {setTaskParams({ ...taskParams, description })}}
          />
          <CheckboxInput
            label='发布人'
            value={taskParams.owner}
            options={
              [
                { name: '公会', value: TaskOwner.treasury },
                { name: '本人', value: TaskOwner.personal }
              ]
            }
            onChange={owner => setTaskParams({ ...taskParams, owner})}
          />
          <TextInput
            label='任务积分'
            placeholder='请输入任务奖励积分'
            value={String(taskParams.score || '')}
            type='number'
            onChange={(score) => {setTaskParams({ ...taskParams, score: Number(score) })}}
          />
        </Form>
      </Card>
      <Card>
        <Form>
          <SelectPicker
            label='任务类型'
            value={taskParams.type}
            placeholder='请选择任务类型'
            options={[
              { label: '全员共享', value: TaskType.all },
              { label: '限定群体', value: TaskType.group  },
              { label: '指定专人', value: TaskType.personal}
            ]}
            onChange={(type) => {setTaskParams({ ...taskParams, type })}}
          />
          <TextInput
            label='指定情况'
            placeholder='请输入指定群体范围人员'
            value={taskParams.assignee}
            type='number'
            onChange={(assignee) => {setTaskParams({ ...taskParams, assignee })}}
          />
          <SelectPicker
            label='限制次数'
            value={taskParams.limitType}
            placeholder='请选择限制次数'
            options={[
              { label: '每人一次', value: 'once' },
              { label: '一天一次', value: 'daily' },
            ]}
            onChange={(limitType) => {setTaskParams({ ...taskParams, limitType })}}
          />
          <DatePicker
            label='截止日期'
            placeholder='请选择截止日期'
            value={taskParams.endDate}
            onChange={(endDate) => {setTaskParams({ ...taskParams, endDate })}}
          />
          <TimePicker
            label='截止时间'
            placeholder='请选择截止时间'
            value={taskParams.endDateTime}
            onChange={(endDateTime) => {setTaskParams({ ...taskParams, endDateTime })}}
          />
        </Form>
      </Card>
      <PrimaryButton
        onClick={createTeasuryTask}
        disabled={!(taskParams.name && taskParams.description && taskParams.score && taskParams.type && taskParams.limitType && taskParams.endDate && taskParams.endDateTime)}
        text='发布任务'
      />
    </View>
  )
}
